<template>
	<el-dialog v-model="visible" :title="!dataForm.id ? '新增' : '修改'" :close-on-click-modal="false" width="600px" @close="handleClose" :destroy-on-close="true">
		<el-form ref="dataFormRef" :model="dataForm" :rules="dataRules" label-width="120px" @keyup.enter="submitHandle()">
			<el-form-item prop="department_name" label="名称">
				<el-input v-model="dataForm.department_name" placeholder="名称"></el-input>
			</el-form-item>
			<el-form-item prop="parentName" label="上级部门" class="org-list">
				<el-popover ref="orgListPopover" placement="bottom-start" trigger="click" :width="400" popper-class="popover-pop">
					<template #reference>
						<el-input v-model="dataForm.parentName" :readonly="true" placeholder="上级部门">
							<template #suffix>
								<svg-icon v-if="dataForm.pid !== '0'" icon="icon-close-circle" @click.stop="treeSetDefaultHandle()"></svg-icon>
							</template>
						</el-input>
					</template>
					<div class="popover-pop-body">
						<el-tree
							ref="orgListTree"
							:data="orgList"
							:props="{ label: 'department_name', children: 'children' }"
							node-key="id"
							:default-expand-all="true"
							:highlight-current="true"
							:expand-on-click-node="false"
							accordion
							@current-change="treeCurrentChange"
						>
						</el-tree>
					</div>
				</el-popover>
			</el-form-item>
			<el-form-item prop="code" label="部门编号">
				<el-input v-model="dataForm.code" placeholder="部门编号"></el-input>
			</el-form-item>
			<el-form-item prop="sort" label="排序">
				<el-input-number v-model="dataForm.sort" controls-position="right" :min="0" label="排序"></el-input-number>
			</el-form-item>
		</el-form>
		<template #footer>
			<el-button @click="visible = false">取消</el-button>
			<el-button type="primary" @click="submitHandle()">确定</el-button>
		</template>
	</el-dialog>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted, nextTick } from 'vue'
import { ElMessage } from 'element-plus/es'
import { useOrgAddApi, useOrgApi, useOrgListApi } from '@/api/org'
import { timeResetDate } from '@/utils/tool'

const emit = defineEmits(['refreshDataList'])

const visible = ref(false)
const orgList: any = ref([])
const orgListTree = ref()
const dataFormRef = ref()
const orgListPopover = ref()

const dataForm: any = reactive({
	id: '',
	department_name: '',
	pid: '',
	parentName: '',
	code: '',
	sort: 0
})
const handleClose = () => {
    console.log('弹窗关闭');
    // orgListTree.value?.setCurrentKey(null);
}
const init = (id?: number, isOne?: any) => {
    console.log('id', id);
    console.log('isOne', isOne);
	visible.value = true
	dataForm.id = ''
	dataForm.department_name = ''

	// 重置表单数据
	if (dataFormRef.value) {
		dataFormRef.value.resetFields()
	}

	// id 存在则为修改
	if (id && !isOne) {
        dataForm.id = id;
		getOrg(id)
	} else {
		treeSetDefaultHandle()
	}
    if (id && isOne) {
        dataForm.pid = id;
        nextTick(() => {
            orgListTree.value.setCurrentKey(dataForm.pid)
        })
    }
}

// 获取部门列表
const getOrgList = () => {
	useOrgListApi().then((res: any) => {
        const list = res.data;
        // list.forEach(item => {
        //     if (item.children?.length) {
        //         item.children.forEach(e => {
        //             e.children = []
        //         });
        //     }
        // })
		orgList.value = [
            {
                department_name: '一级部门',
                id: 0,
                pid: 0,
            },
            ...list
        ];
	})
}
onMounted(() => {
    getOrgList();
})

// 获取信息
const getOrg = (id: number) => {
	useOrgApi({id}).then((res: any) => {
        delete res.data.created_at;
        delete res.data.updated_at;
        delete res.data.deleted_at;
		Object.assign(dataForm, res.data)

		if (dataForm.pid == '0') {
			return treeSetDefaultHandle()
		}

		nextTick(() => {
            orgListTree.value.setCurrentKey(dataForm.pid)
        })
	})
}

// 上级部门树, 设置默认值
const treeSetDefaultHandle = () => {
	dataForm.pid = '0'
	dataForm.parentName = '一级部门'
}

const treeCurrentChange = (data: any) => {
	dataForm.pid = data.id
	dataForm.parentName = data.department_name
	orgListPopover.value.hide()
}

const dataRules = ref({
	department_name: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],
	parentName: [{ required: true, message: '必填项不能为空', trigger: 'change' }]
})

// 表单提交
const submitHandle = () => {
	dataFormRef.value.validate((valid: boolean) => {
		if (!valid) {
			return false
		}
        const params:any = {
            pid: dataForm.pid,
            department_name: dataForm.department_name,
            sort: dataForm.sort,
            code: dataForm.code,
            status: 1
        };
        if (dataForm.id) {
            params.id = dataForm.id;
            params.updated_at = timeResetDate();
        }
        useOrgAddApi(params).then((result) => {
            if (result) {
                getOrgList();
                ElMessage.success({
                    message: '操作成功',
                    duration: 500,
                    onClose: () => {
                        visible.value = false
                        emit('refreshDataList')
                    }
                })
            }
        }).catch((err) => {
            
        });
	})
}

defineExpose({
	init
})
</script>

<style lang="scss" scoped>
.org-list {
	::v-deep(.el-input__inner) {
		cursor: pointer;
	}
	::v-deep(.el-input__suffix) {
		cursor: pointer;
	}
}
</style>
